<template>
    <div class="rewardPopup" @click.stop="hide">
      <div class="content" @click.stop="stop" ref="input1">
        <div class="close">
          <i class="iconfont icon-guanbi" @click.stop="hide"></i>
        </div>
        <div class="title">
          选择奖学金
        </div>
        <div class="reward-options" v-infinite-scroll="loadMore"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="1">
          <div class="reward-item" v-if="reward_list.length>0" v-for="reward in reward_list" @click="selectReward(reward)">
            <div class="reward-item-left">
              <div class="reward-item-left-top">
                <span class="reward-name">{{reward.scholarship_type_name}}</span>
                <div v-if="reward.scholarship_type === 1" class="reward-type-huiyuan">会员奖学金</div>
                <div v-if="reward.scholarship_type === 2" class="reward-type-gongdu">共读奖学金</div>
              </div>
              <div class="reward-item-left-bottom">
                {{reward.scholarship_name}} | {{reward.scholarship_start_time.split(' ')[0].replace(/-/g,'/')}}开始
              </div>
            </div>
            <div class="reward-item-right">
               <div v-if="reward.can_apply === 0" class="noApply">无申请资格<i class="icon iconfont icon-jinru"></i></div>
               <img v-if="reward.can_apply !== 0 && reward !== selected_reward" class="select-icon" src="../../assets/img/reward/notSelected.png"/>
               <img v-if="reward.can_apply !== 0 && reward === selected_reward" class="select-icon" src="../../assets/img/reward/selected.png"/>
            </div>
          </div>
          <div class="reward-empty" v-if="reward_list.length === 0">
            <i class="iconfont icon-jiangxuejin1"></i>
            <p>你还没有可申请的奖学金哦～</p>
          </div>
        </div>
        <div class="Vipfooter">
          <div class="btn">
            <btn :obj='btnstyle' :text="textbtn" v-on:statr="confirmReward()"></btn>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import btn from '../../components/btn/index'
    import $ from 'jquery'
    export default {
        name: "index",
        data:function(){
          return{
            loading: false,
            apply_index:0,
            un_apply_index:1,
            btnstyle: {
              backgroundColor: '#ffd000',
              width: '80%',
              color: '#66440a',
              opacity: 1
            },
            textbtn:'确定',
            reward_list:[
              // {
              //   scholarship_type_name:'360天会员奖学金',
              //   scholarship_type:1,
              //   scholarship_name:'360天会员阅读',
              //   scholarship_start_time:'2018/09/28开始',
              //   can_apply:0
              // },
              // {
              //   scholarship_type_name:'360天会员奖学金',
              //   scholarship_type:2,
              //   scholarship_name:'360天会员阅读',
              //   scholarship_start_time:'2018/09/28开始',
              //   can_apply:1
              // },
              // {
              //   scholarship_type_name:'360天会员奖学金',
              //   scholarship_type:1,
              //   scholarship_name:'360天会员阅读',
              //   scholarship_start_time:'2018/09/28开始',
              //   can_apply:1
              // },
              // {
              //   scholarship_type_name:'360天会员奖学金',
              //   scholarship_type:1,
              //   scholarship_name:'360天会员阅读',
              //   scholarship_start_time:'2018/09/28开始',
              //   can_apply:1
              // }
            ],
            selected_reward : {}
          }
        },
        mounted:function(){
          // // 获取待申请奖学金列表
          // var data = {
          //   params:{
          //     status:0,
          //     page_index:this.apply_index
          //   }
          // }
          // this.$axios.scholarship(data).then(res=>{
          //   if(res.data.qing_data.length !==0){
          //     this.reward_list = this.reward_list.concat(res.data.qing_data)
          //     // 如果奖学金数量大于3，设置容器高度使之可以滚动
          //     if(this.reward_list.length >= 3){
          //       $('.reward-options').css({
          //         height:'24rem'
          //       })
          //     }
          //   }else{
          //     // 加载不可申请列表
          //     var unApplyData = {
          //       params:{
          //         status:-1,
          //         page_index:this.un_apply_index++
          //       }
          //     }
          //     this.$axios.scholarship(unApplyData).then(res=>{
          //       if(res.data.qing_data.length !==0){
          //         this.reward_list = this.reward_list.concat(res.data.qing_data)
          //       }else{
          //         this.loading = true
          //       }
          //       // 如果奖学金数量大于3，设置容器高度使之可以滚动
          //       if(this.reward_list.length >= 3){
          //         $('.reward-options').css({
          //           height:'24rem'
          //         })
          //       }
          //     })
          //   }
          // })

          // 获取总数量判断弹出层高度



          // 向上移动底部按钮的高度
          // $('.reward-options').css({
          //   marginBottom:$('.Vipfooter').height()+'px'
          // })

        },
        methods:{
          hide: function () {
            this.$emit('hide')
          },
          stop: function (e) {
            if (e && e.stopPropagation) {
              e.stopPropagation();
            } else {
              window.event.cancelBubble = true
            }
            return false
          },
          // 提交选择奖学金
          confirmReward: function () {
            this.$emit('confirmReward',this.selected_reward)
          },
          // 点击选择奖学金
          selectReward: function (reward) {
            // 奖学金不可选则弹窗提示
            if(reward.can_apply === 0){
              this.$emit('noReward',reward)
            }else{
              this.selected_reward = reward
            }
          },
          loadMore: function () {
            // 获取待申请奖学金列表
            this.apply_index++
            var data = {
              params:{
                status:0,
                page_index:this.apply_index
              }
            }
            this.$axios.scholarship(data).then(res=>{
              if(res.data.qing_data.length !==0){
                this.reward_list = this.reward_list.concat(res.data.qing_data)
                // 如果奖学金数量大于3，设置容器高度使之可以滚动
                if(this.reward_list.length >= 3){
                  $('.reward-options').css({
                    height:'24rem'
                  })
                }else if(this.reward_list.length >0){
                  // 如果奖学金数量小于3且不等于0,再次调用本接口
                  this.loadMore()
                }
              }else{
                // 加载不可申请列表
                var unApplyData = {
                  params:{
                    status:-1,
                    page_index:this.un_apply_index++
                  }
                }
                this.$axios.scholarship(unApplyData).then(res=>{
                  if(res.data.qing_data.length !==0){
                    for(let index in res.data.qing_data){
                      res.data.qing_data[index].can_apply= 0
                    }
                    this.reward_list = this.reward_list.concat(res.data.qing_data)
                    // 如果奖学金数量大于3，设置容器高度使之可以滚动
                    if(this.reward_list.length >= 3){
                      $('.reward-options').css({
                        height:'24rem'
                      })
                    }
                  }else{
                    this.loading = true
                  }
                })
              }
            })
          }
        },
        components:{btn}
    }
</script>

<style scoped>
 @import "css/index.css";
</style>
